<!-- 攻略 文章 -->
<template>
    <div class="box">
        <span class="article-list-title">推荐攻略</span>

        <ul class="article-box">
            <li class="article-item" v-for="(item, index) in introduction.slice(0,moreComment)" :key="index">
                <a href="#" class="article-item-link">
                  <header class="from-box">
                       <div class="left-from">
                            <img src="@/assets/new-gl-icon6_02.png">
                            <span style="margin-left:10px;font-size:12px">
                                来自<span style="color:#ff9d00">游记</span>
                            </span>
                        </div>

                        <div class="right-fab">
                            <span style="color:#ff9d00;margin-right:5px">{{item.intFab}}</span> 蜂蜂顶 <i class="fa fa-thumbs-up" aria-hidden="true" style="color:#ff9d00;font-size:20px;margin-left:5px"></i>
                        </div>
                  </header>

                  <div class="article-content-item">
                      <header class="article-content-title">{{item.intTitle}}</header>
                      <div class="article-content-item">
                          <img :src="item.intImg" width="220px" height="150px">
                          <div class="article-content-inf">
                              <p class="article-content-inf-text">
                                  {{item.intArticle}}
                              </p>
                              <div class="article-content-com">
                                  <img :src="item.intAuthorImg" width="16px" height="16px">
                                  <span style="color:#ff9d00;margin:0 10px">{{item.intAuthorName}}</span>
                                  <span>{{item.intViews}}浏览，{{item.intComment}}评论</span>
                              </div>
                          </div>
                      </div>
                  </div>
                </a>
            </li>
        </ul>

        <div class="more-box" @click="openMore" v-if="introduction.length>10 && introduction.length>moreComment">加载更多<i class="fa fa-angle-double-down more-icon" aria-hidden="true"></i></div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    data () {
        return {
            moreComment:10,
        };
    },

    components: {},
    computed:{
        ...mapState(['introduction'])
    },
    mounted(){
        this.$store.dispatch('reqIntroduction')
    },
    methods: {
        openMore(){
            if(this.moreComment<this.introduction.length){
                this.moreComment+=10
            }
        },
    }
}

</script>
<style scoped lang="stylus" ref="stylesheet/stylus">
    .box
        width 790px
        .article-list-title
            font-size 20px
            color #333333
            line-height 48px
            width 790px
            display block
            border-bottom 1px solid #e3e3e3
        .article-box
            margin 0 -20px
            padding-bottom 20px
            margin-bottom -20px
            .article-item
                padding-bottom 20px
                border-bottom 1px solid #e3e3e3
                .article-item-link
                    padding 20px 20px
                    display flex
                    flex-direction column
                    
                    &:hover
                        background-color #efefef
                        .article-content-title
                            color #ff9d00
                    .from-box
                        display flex
                        justify-content space-between
                        color #666666
                        .left-from
                            display flex
                            align-items center
                        .right-fab
                            font-size 14px
                            border 1px solid #ff9d00
                            border-radius 20px
                            padding 5px 15px
                    .article-content-item
                        .article-content-title
                            font-size 20px
                            margin 15px 0
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        .article-content-item
                            display flex
                            .article-content-inf
                                color #666666
                                display flex
                                flex-direction column
                                align-items flex-end
                                justify-content space-between
                                padding 10px 0
                                margin-left 20px
                                .article-content-inf-text
                                    text-overflow: -o-ellipsis-lastline;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    display: -webkit-box;
                                    -webkit-line-clamp: 3;
                                    -webkit-box-orient: vertical;
                                    font-size 14px
                                    line-height 25px
                                .article-content-com
                                    font-size 12px
                                    display flex
                                    img 
                                        border-radius 50%
        .more-box
            background-color #fff5e5
            border-radius 4px
            color #666666
            line-height 40px
            text-align center
            margin-top 15px
            margin-bottom 50px
            font-size 12px
            .more-icon
                font-size 18px
                margin-left 10px
            &:hover
                background-color rgb(239,239,239)
                cursor pointer
                .more-icon
                    color #ff9d00 

                            
                            

</style>